<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:h="http://xmlns.jcp.org/jsf/html" xmlns:ui="http://xmlns.jcp.org/jsf/facelets" xmlns:f="http://java.sun.com/jsf/core"
	xmlns:p="http://primefaces.org/ui" xmlns:c="http://java.sun.com/jsp/jstl/core">

<h:head>
	<!-- include meta, stylesheets, jquery and title -->
	<ui:include src="/WEB-INF/master/implement.xhtml" />
</h:head>

<h:body>

	<ui:include src="/WEB-INF/master/header.xhtml" />

	<div class="container navigation">
		<ui:include src="/WEB-INF/master/navigation.xhtml" />

		<!-- get customer info -->
		<f:event listener="#{customerController.getAllCustomerData}" type="preRenderView" />

		<h:form id="cart">
			<div class="col-md-7">

				<!-- header of the checkout -->
				<div class="row-fluid">
					<div class="col-sm-12">
						<h1>Warenkorb</h1>
						<p:message for="buy" showDetail="true" autoUpdate="true" />
						<br />
					</div>
				</div>

				<br /> <br /> <br /> <br />
				<div class="row-fluid">

					<!-- show items in cart -->
					<ui:repeat var="i" value="#{orderContainer.orders}">

						<div class="col-md-6">
							<table class="table table-bordered">
								<tbody id="test">
									<tr>
										<td rowspan="4" style="text-align: center; border-right: 0; border-left: 1; border-top: 1; border-bottom: 1;"><h:commandLink action="#{productController.ProductDetail(i.productId)}">
												<h:graphicImage rendered="#{i.shiny == false}" value="resources/img/normal/#{i.pokemonId}.png" width="100" height="100" />
												<h:graphicImage rendered="#{i.shiny == true}" value="resources/img/shiny/#{i.pokemonId}.png" width="100" height="100" />
											</h:commandLink></td>
									</tr>
									<tr>
										<td style="border-right: 1; border-left: 0; border-top: 1; border-bottom: 0;">##{i.pokemonId} - #{i.pokemonName}</td>
									</tr>
									<tr>
										<td style="border-right: 1; border-left: 0; border-top: 0; border-bottom: 0;">Preis: <h:outputText value="#{i.totalAmount}">
												<f:convertNumber pattern="#0.00" />
											</h:outputText>€
										</td>
									</tr>
									<tr>
										<td style="border-right: 1; border-left: 0; border-top: 0; border-bottom: 1;"><p:commandLink action="#{orderController.removeProductFromOrder(i.productId)}"
												oncomplete="$('#removeProduct').modal('show'); return false;" update=":cart">
												Entfernen
											</p:commandLink></td>
									</tr>
								</tbody>
							</table>
						</div>

					</ui:repeat>

				</div>



			</div>

			<!-- right info bar for guests -->
			<h:panelGroup rendered="#{customerSession.loggedIn != 1}">
				<div class="col-md-3">
					<div style="position: fixed;">
						<div class="col-sm-12">
							<div class="row-fluid">
								<h1>
									Summe:
									<h:outputText value="#{order.totalRealAmount}">
										<f:convertNumber pattern="#0.00" />
									</h:outputText>
									€
								</h1>
							</div>
							<div class="row-fluid">
								<h3>Um Kauf abzuschließen</h3>
								<h3>Bitte anmelden</h3>
							</div>
						</div>
					</div>
				</div>
			</h:panelGroup>

			<!-- right info bar for users -->
			<h:panelGroup rendered="#{customerSession.loggedIn == 1}">
				<div class="col-md-3">

					<div style="position: fixed;">

						<div class="col-sm-12">
							<div class="row-fluid">
								<h1>
									Summe:
									<h:outputText value="#{order.totalRealAmount}">
										<f:convertNumber pattern="#0.00" />
									</h:outputText>
									€
								</h1>
							</div>
						</div>

						<div class="row-fluid">
							<div class="col-sm-12">
								<h3 style="text-align: left">Anschrift</h3>
								<h5>
									#{customer.name} <br />
									<h:panelGroup rendered="#{customer.company != null}"> #{customer.company} <br />
									</h:panelGroup>
									#{customer.street} <br /> #{customer.postcode} #{customer.city} <br />
									<h:panelGroup rendered="#{customer.company != null}"> #{customer.telephone} <br />
									</h:panelGroup>
								</h5>
							</div>
						</div>

						<div class="row-fluid">
							<div class="col-sm-12">
								<h3 style="text-align: left">Bankverbindung</h3>
								<h5>
									#{customer.bankDepositor} <br /> #{customer.bankAccountNo} <br /> #{customer.bankCode}
								</h5>
							</div>
						</div>

						<div class="row-fluid">
							<div class="col-sm-12">
								<h3 style="text-align: left">Freundescode</h3>
								<h5>#{customer.friendcode}</h5>
							</div>
						</div>

						<div class="row-fluid">
							<div class="col-sm-8">
								<hr />
							</div>
						</div>

						<div class="row-fluid">
							<div class="col-sm-12">
								<h:commandButton id="buy" class="btn btn-default" value="Kauf abschlie&szlig;en" action="#{orderController.completeOrder}" />
							</div>
						</div>

					</div>

				</div>

			</h:panelGroup>

		</h:form>
	</div>

	<!-- modal message after removing a product from the basket-->
	<div class="modal fade" id="removeProduct" role="dialog">
		<div class="modal-dialog">
			<div class="modal-content">
				<form class="form-horizontal">
					<div class="modal-body">
						<h4>Artikel erfolgreich aus dem Warenkorb entfernt</h4>
					</div>
				</form>
			</div>
		</div>
	</div>

</h:body>
</html>
